<template>
    <!-- 教师考试批阅 -->
    <div id="teacher-marking">
        <!-- 调整相似度-查重设置弹出框 -->
        <el-dialog :close-on-click-modal="false" class="dialog-check" title="查重设置" :visible.sync="dialogCheck" width="30%">
            <p class="check-tishi">
                <i class="el-icon-warning"></i>批量控制该考试所有学生的实验报告重复率检查比率
            </p>
            <p class="dialog-b">实验报告代码查重校验
                <el-switch v-model="dialogCheckSwitch"></el-switch>
            </p>
            <!-- 关闭相似度不显示 -->
            <p v-if="dialogCheckSwitch">实验报告相似度高于
                <el-select class="dialog-check-value" v-model.number="resData.reportDuplicatePercent" placeholder="请选择">
                <el-option v-for="item in optionsRepeat" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
                </el-select>
                <!-- <el-input @keyup.native="provingCount(testData,'reportDuplicatePercent')" class="dialog-check-value" v-model.number="testData.reportDuplicatePercent"></el-input> -->
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="sameSubmit">保存</el-button>
                <br>
                <br>
            </span>
        </el-dialog>
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content">
                    <div v-if="resData">
                        <span class="preview-title">{{ resData.courseName }}</span>
                        <span class="preview-line">/</span>
                        <span>{{ resData.paperName }}</span>
                        <span>姓名：{{ resData.userName }}</span>
                        <span>学号：{{ resData.userNumber }}</span>
                    </div>
                </div>
            </div>
            <div class="preview-top2 jx-content">
                <div class="preview-top-content clearfix">
                    <div class="fl">
                        <span class="fs18">试卷名称：{{ resData.paperName }}</span> &nbsp;
                        <el-tooltip class="item" effect="dark" content="提示：选择题、判断题系统自动批阅，教师只需要批阅填空题、简答题，输入得分，点击提交即可。" placement="bottom">
                        <i class="iconfont icon-wenti-m c-blue fs18"></i>
                        </el-tooltip>
                        <!-- <div class="sj-notice c-btn-blue">提示：选择题、判断题系统自动批阅，教师只需要批阅填空题、简答题，输入得分，点击提交即可。</div> -->
                    </div>
                    <div class="fr" v-if="resData">
                        <div @click="submitMarking" class="button-style">提 交</div>
                        <el-button @click="getPaper(resData.preview)" :disabled="!resData.preview" class="button-style">上一份</el-button>
                        <el-button @click="getPaper(resData.next)" :disabled="!resData.next" class="button-style">下一份</el-button>
                    </div>
                </div>
                <div class="preview-top-content2" v-if="resData">
                    <el-row>
                        <el-col style="margin: 7px 0;" v-for="(item,index) in resData.readingList" :key="index" :span="8">
                        <div class="c-blue">
                            <!-- {{item}} -->
                            <!-- 题目类型 -->
                            <span class="show-question-title">{{ item.typeName }}</span>
                            <span class="show-question-score">得分：{{ item.totalScore }}分</span>
                            <span v-if="item.type < 3" class="show-question-truenum">正确{{ item.right }}/{{ item.questionList.length }}题</span>
                            <span v-else class="show-question-truenum">{{ item.questionList.length }}题</span>
                            <!-- <span>共{{ item.questionList.length }}题</span>
                            <span>得分{{ item.totalScore }}分</span>
                            <span v-if="item.type < 3">
                            <span>正确{{ item.right }}题</span>
                            <span>错误{{ item.wrong }}题</span>
                            </span> -->
                        </div>
                        </el-col>
                        <el-col style="margin: 7px 0;" :span="8">
                            <span style="font-weight:bold;" class="c-blue fs16">总分数：{{ resData.score }}分</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="jx-content preview-content" v-if="resData">
            <div v-for="(item,index) in resData.readingList" :key="index">
                <!-- 题型标题：一、选择题（每题1分，共2题） -->
                <h2 class="tq-title">{{ questionNumber[index] }}、{{ item.typeName }}(每题{{ item.score }}分，共{{ item.questionList.length }}题)
                    <div v-if="item.type === 6" class="fr">
                        <div style="font-weight:normal; margin:4px 6px 0 0;" @click="dialogCheck = true;" class="button-style">
                            调整相似度
                        </div>
                        <el-tooltip class="item" effect="dark" content="设置学生提交的word版实验报告查重比率，系统会自动识别出高于此比率的实验报告。" placement="bottom">
                            <i style="vertical-align: -5px;" class="iconfont icon-wenti-m c-blue fs18"></i>
                        </el-tooltip>
                    </div>
                </h2>
                <dl v-for="(item2,index2) in item.questionList" :key="index2">
                    <dt class=" markdown-body">
                        <!-- 题型中序号 1.xxxx -->
                        {{ index2+1 }}.
                        <!-- 题目内容 -->
                        <span v-html="item2.content"></span>
                        <span>
                            <span v-if="item.type > 2">({{ item.score }}分)</span>
                        </span>
                        <!-- 选择题 单选多选 -->
                        <span v-if="item.type == 1">
                            <span v-if="!item2.isMultipleChoice">[单选题]</span>
                            <span v-if="item2.isMultipleChoice">[多选题]</span>
                        </span>
                        <!-- 括号 选择题答案映射选项A,B,C -->
                        <span class="chose-item" :class="{'c-red':!item2.right}" v-if="item.type === 1">
                        (
                        <!-- 单选题 -->
                        <span v-if="!item2.isMultipleChoice">
                            <!-- 选择题没答 -->
                            <span class="c-red" v-if="!item2.userAnswer && item2.userAnswer !== 0">未填写</span>
                            <span v-else>{{ qKey[item2.userAnswer] }} </span>
                        </span>
                        <!-- 多选题 -->
                        <span v-if="item2.isMultipleChoice">
                            <!-- 选择题没答 -->
                            <span class="c-red" v-if="isChoseNull(item2,index2) || item2.userAnswer == []">未填写</span>
                            <span v-else>{{ item2.userAnswer.map(item => qKey[item]).join("") }} </span>
                        </span>
                        )
                        </span>
                        <!-- 括号 判断题答案映射 正确 错误 -->
                        <span class="chose-item" :class="{'c-red':!item2.right}" v-else-if="item.type === 2">
                        (
                        <!-- 判断题没答 -->
                        <span class="c-red" v-if="!item2.userAnswer && item2.userAnswer !== false">未填写</span>
                        <span v-else>{{ judgekey[item2.userAnswer-0] }}</span>
                        )
                        </span>
                        <!-- 填空要把题型内括号过滤 没过滤==================================================================================================== -->
                        <!-- 括号 填空题 显示括号 -->
                        <!-- 括号 简答 编程 实验 不显示括号 -->
                        <div v-else v-show="item.type !== 6">
                            学生答案：
                            <span class="c-red" v-if="!item2.userAnswer">未填写</span>
                            <span v-else v-html="item2.userAnswer"></span>
                        </div>

                        <!-- 每题分数 选择判断 -->
                        <span v-if="item.type < 3">({{ item.score }}分)</span>
                        <!-- 正确答案 -->
                        <!--选择题显示正确答案不换行-->
                        <br v-if="item.type === 2" />
                        <!-- 实验报告 -->
                        <div v-if="item.type === 6">
                            <div class="" v-if="item2">
                                <!-- <div class="marking-test-title c-blue">在线版实验报告</div> -->
                                <div v-if="item2.reportContents" class="ex-answer" v-html="item2.reportContents"></div>
                                <div v-else style="color:#ff4240;" class="ex-answer">未填写</div>
                                <!-- <div class="marking-test-title c-blue">word版实验报告</div> -->
                                <div class="clearfix">
                                    <div class="fl">
                                        <div v-if="item2.reportAddress">
                                            <span class="c-gray">{{item2.reportName}}</span>
                                            <a href="javascript:;" @click="$downloadfile.download(item2.reportAddress,item2.reportName)">下载</a>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="resData.checkReportDuplicate && (item2.resultList !== undefined && item2.resultList.length)" class="same-content" :class="{'same-content-hidden':sameContentShow}">
                                    <ul v-if="item2.resultList.length">
                                        <li v-for="(item6,index) in item2.resultList" :key="index">
                                        <span>该学生与{{ item6.userName }}同学代码相似度高达</span>
                                        <div class="progress">
                                            <el-progress :percentage="item6.percent"></el-progress>
                                        </div>
                                        <a href="javascript:;" @click="$downloadfile.download(item6.url,item6.reportName)">下载{{ item6.userName }}实验报告</a>
                                        </li>
                                    </ul>
                                    <div v-if="item2.resultList.length > 3" @click="sameContentShow = !sameContentShow" class="show-same-content" :class="{'same-content-hidden-icon':!sameContentShow}">
                                        <i class="el-icon-arrow-down"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span class="c-blue">
                            正确答案：
                            <!-- 选择题映射选项A,B,C -->
                            <span v-if="item.type === 1">{{ item2.rightAnswer.map(item => qKey[item]).join("") }}</span>
                            <!-- 判断题映射 正确 错误 -->
                            <span v-else-if="item.type === 2">{{ judgekey[item2.rightAnswer-0] }}</span>
                            <span v-else v-html="item2.rightAnswer"></span>
                        </span>
                        <!-- 得分input框 -->
                        <div v-if="item.type > 2" class="c-blue question-score">
                            得分：
                            <el-input @keyup.native="provingCount(item2,'score',item)" v-bind="questionScore" v-model.number="item2.score"></el-input>
                        </div>
                    </dt>
                    <!-- 选择题选项 -->
                    <dd style="margin:10px 0;" v-if="item.type == 1" v-for="(item3,index3) in item2.choiceList" :key="index3">
                        <span v-html="qKey[index3] + '. ' + item3"></span>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    import $ from "jquery";
    //导出word
    import "../../../../static/wordExport/jquery.wordexport";
    export default {
        data() {
            return {
                optionsRepeat: [
                    {
                        value: 90,
                        label: "90%"
                    },
                    {
                        value: 80,
                        label: "80%"
                    },
                    {
                        value: 70,
                        label: "70%"
                    },
                    {
                        value: 60,
                        label: "60%"
                    },
                    {
                        value: 50,
                        label: "50%"
                    },
                    {
                        value: 40,
                        label: "40%"
                    },
                    {
                        value: 30,
                        label: "30%"
                    },
                    {
                        value: 20,
                        label: "20%"
                    },
                    {
                        value: 10,
                        label: "10%"
                    }
                ],
                //查重设置弹出框
                dialogCheck: false,
                //查重设置开关
                dialogCheckSwitch: false,
                //向下箭头 展开更多
                sameContentShow: true,
                //实验数据
                testData: "",
                //接收的题目列表
                resData: "",
                //选择题
                questionList1: null,
                //判断题
                questionList2: null,
                //填空题
                questionList3: null,
                //简答题
                questionList4: null,
                //编程题
                questionList5: null,
                qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
                judgekey: ["错误", "正确"],
                questionNumber: ["一", "二", "三", "四", "五", "六"],
                questionName: [
                    {
                        type: 1,
                        name: "选择题"
                    },
                    {
                        type: 2,
                        name: "判断题"
                    },
                    {
                        type: 3,
                        name: "填空题"
                    },
                    {
                        type: 4,
                        name: "简答题"
                    },
                    {
                        type: 5,
                        name: "编程题"
                    }
                ]
            };
        },
        computed: {
            //计算除选择判断外其他题得分和总分
            questionScore() {
                let that = this;
                if (that.resData) {
                    console.log(that.resData, 11);
                    //计算除选择填空之外其他题型的总分
                    let newreadingList = that.resData.readingList.filter(item => item.type > 2);
                    if (newreadingList.length) {
                        newreadingList.forEach(item => {
                            item.totalScore = item.questionList.map(item2 => item2.score - 0).reduce((total, num) => total + num);
                        });
                    }
                    //计算总分
                    let readingList = that.resData.readingList;
                    if (readingList.length) {
                        that.resData.score = readingList.map(item => item.totalScore - 0).reduce((total, num) => total + num);
                    }
                }
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getPaper(window.localStorage.getItem("answerSheetId"));
                //this.getTest();
            },
            //选择题多选是否填写
            isChoseNull(item2, index2) {
                //是数组
                if (item2.userAnswer instanceof Array) {
                    console.log(item2.userAnswer, 66666);
                    return !item2.userAnswer.length;
                } else {
                    //不是数组
                   // return item2.userAnswer && item2.userAnswer !== "empty";
                 return true
                }
            },
            //限制input框只能输入正整数 并且不能超出指定分数
            provingCount(item, prop, row) {
                let that = this;
                //限制输入数字
                console.log(item[prop], 55);
                let reg = /^[0-9]+$/;
                let isInt = reg.test(item[prop]);
                console.log(isInt, 66);
                if (!isInt) {
                    item[prop] = "";
                    that.$message.warning("只能输入整数");
                }

                let score = row.score;
                let isQuesNum = item[prop] > score;
                if (isQuesNum) {
                    item[prop] = "";
                    that.$message.warning("不能大于题目分数");
                }
            },
            //获取试题
            getPaper(id) {
                var that = this;
                let paperId = that.$route.query.paperId;
                const loading = this.$loading({
                    lock: true,
                    text: "玩命加载中...",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                });
                axios.get("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") +"/course-test/paper/" +paperId + "/student/" +id).then(function(res) {
                    loading.close();
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            //滚动条置顶
                            $("html,body").scrollTop(0);
                            //替换填空题括号
                            //填空题替换(+)为（）
                            let fillQuestion = res.data.data.readingList.find(
                                item => item.type === 3
                            );
                            if (fillQuestion) {
                                let content = fillQuestion.questionList;
                                $.each(content, function(i, d) {
                                    let str = d.content;
                                    var result = str.replace(/\(\+\)/g, "（）"); //把(+)替换成()
                                    d.content = result;
                                });
                            }

                            that.resData = res.data.data;
                            //查重开关
                            that.dialogCheckSwitch = res.data.data.checkReportDuplicate;
                            //存储
                            let localStorage = window.localStorage;
                            localStorage.setItem("answerSheetId", id);
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    loading.close();
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //提交批阅
            submitMarking() {
                var that = this;
                let paperId = that.$route.query.paperId;
                let answerSheetId = window.localStorage.getItem("answerSheetId");
                axios.post("/tes/course/" +this.$localstorage.getLocalStorage("setCourseId") +"/course-test/paper/" + paperId +"/student/" +answerSheetId, that.resData.readingList).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.$message({
                                message: "提交成功",
                                type: "success"
                            });
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //偷摸提交批阅
            submitMarkingNoSuccess() {
                var that = this;
                let paperId = that.$route.query.paperId;
                let answerSheetId = window.localStorage.getItem("answerSheetId");
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") +"/course-test/paper/" + paperId +"/student/" + answerSheetId, that.resData.readingList).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.getPaper(localStorage.getItem("answerSheetId"));
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //获取实验内容
            getTest() {
                var that = this;
                let paperId = that.$route.query.paperId;
                let answerSheetId = window.localStorage.getItem("answerSheetId");
                axios.get("/tes/course/" +this.$localstorage.getLocalStorage("setCourseId") +"/course-test/paper/" + paperId + "/student/" +answerSheetId +"/experiment").then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.testData = res.data.data;
                            that.dialogCheckSwitch = that.testData.checkReportDuplicate;
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //调整相似度点击保存
            sameSubmit() {
                let that = this;
                that.dialogCheck = false;
                let dialogCheckSwitch = that.dialogCheckSwitch;
                if (dialogCheckSwitch) {
                    that.resData.checkReportDuplicate = true;
                    that.dialogCheckSwitch = true;
                } else {
                    that.resData.checkReportDuplicate = false;
                    that.dialogCheckSwitch = false;
                }
                that.getSameList(that.resData.reportDuplicatePercent);
            },
            //获取相似度列表
            getSameList(val) {
                let that = this;
                let paperId = that.$route.query.paperId;
                let reqData = {
                    checkReportDuplicate: that.dialogCheckSwitch,
                    reportDuplicatePercent: val
                };
                axios.post("/tes/course/" +this.$localstorage.getLocalStorage("setCourseId") +"/course-test/paper/" +paperId +"/duplicate-percent",reqData).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                        that.submitMarkingNoSuccess();
                        } else {
                        that.$message({
                            message: res.data.message,
                            type: "error"
                        });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            }
        }
    };
</script>
<style lang="scss">
    @import "../../../styles/layout/color_variables";
    body {
    background: #f8f8f8;
    }
    #teacher-marking {
        background: #f8f8f8;
        img {
            max-width: 80%;
        }
        .show-question-title {
            border: 1px solid $blue;
            padding: 4px 12px;
            border-radius: 20px;
        }
        .show-question-score {
            margin: 0 14px;
        }
        .ex-answer {
            background: #f6f6f6;
            padding: 18px;
            margin: 18px 0;
            color: #727272;
        }
        .sj-notice {
            position: absolute;
            top: 28px;
        }
        //查重弹出框
        .dialog-check {
            .dialog-check-value {
                width: 80px;
                input {
                    width: 80px;
                }
            }
            p {
                line-height: 60px;
                text-align: center;
            }
            .check-tishi{
                i {
                    padding: 0 10px;
                    font-size: 20px;
                    color: $btn-blue;
                }
            }
            .dialog-b {
                margin-left: -27px;
            }
            .el-dialog__footer {
                text-align: center;
            }
            .el-select .el-input__inner {
                width: 80px;
            }
        }
        //实验
        .marking-test-title {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 1px solid #e8e8e8;
            line-height: 60px;
            margin-bottom: 14px;
        }
        .c-gray {
            color: #727272;
        }
        .same-content-hidden {
            height: 165px;
            overflow: hidden;
        }
        .same-content {
            border: 1px solid #cacaca;
            width: 800px;
            box-sizing: border-box;
            padding: 30px 22px;
            margin-top: 40px;
            position: relative;
            li {
            display: flex;
            padding: 10px 0;
            justify-content: space-between;
            .progress {
                width: 270px;
                .el-progress-bar {
                width: 218px;
                padding-right: 10px;
                margin-right: 0;
                }
                .el-progress__text {
                margin-left: 0;
                }
            }
            }
            .show-same-content {
            position: absolute;
            width: 100%;
            height: 50px;
            text-align: center;
            background: #fff;
            left: 0;
            bottom: 0;
            cursor: pointer;
            //   &:after {
            //     font-family: "element-icons" !important;
            //     content: "\e603";
            //   }
            }
            .same-content-hidden-icon {
            //   &:after {
            //     font-family: "element-icons" !important;
            //     content: "\e605";
            //   }
            }
        }
        .underline {
            text-decoration: underline;
        }
        .font16 {
            font-size: 16px;
            line-height: 40px;
        }
        //选择题答案下划线
        .chose-item {
            text-decoration: underline;
            padding: 0 4px;
        }
        .question-score {
            padding: 10px 0;
            .el-input {
                width: auto;
                .el-input__inner {
                    width: 50px;
                }
            }
        }
        .preview-top {
            position: relative;
            z-index: 1;
            height: 220px;
            margin: 0px auto 0;
            .preview-top1 {
                width: 100%;
                height: 60px;
                line-height: 60px;
                background: #101937;
                position: fixed;
                top: 0;
                color: #fff;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    span {
                        margin-right: 40px;
                    }
                    .preview-title {
                        font-size: 18px;
                        margin-right: 0;
                    }
                    .preview-line {
                        margin: 0 6px;
                    }
                }
            }
            .preview-top2 {
                margin-top: 0;
                width: 100%;
                line-height: 60px;
                position: fixed;
                top: 60px;
                padding: 0;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    padding: 0 40px;
                    .button-style {
                        margin-left: 20px;
                    }
                }
                .preview-top-content2 {
                    width: 1200px;
                    margin: 0 auto;
                    line-height: 30px;
                    padding-bottom: 10px;
                }
            }
        }
        .preview-content {
            width: 1200px;
            margin: 20px auto 20px;
            color: $title-gray;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            p {
                display: inline;
            }
            .tq-title {
                color: $title-gray;
                font-size: 16px;
                line-height: 40px;
            }
            dl {
                padding-left: 20px;
            }
            dt,
            dd {
                font-size: 14px;
                line-height: 30px;
            }
            dd {
                padding-left: 20px;
            }
            .btn-group {
                text-align: center;
                .button-style {
                    margin: 40px 5px;
                }
            }
        }
    }
</style>
